<template>
    <!-- 限制用户信息区域最大宽度 -->
    <div class="flex flex-row items-center gap-3 bg-white px-4 py-2 rounded-full shadow-sm hover:shadow transition-shadow">
    
        <!-- 修改div为具有适当宽度和不换行的显示 -->
        <div class="whitespace-nowrap min-w-fit font-medium text-gray-700 overflow-hidden">
            <n-ellipsis :line-clamp="1" style="max-width: 120px;">
                {{ userName }}
            </n-ellipsis>
        </div>
        <n-button @click="logout" size="small" type="error" secondary class="flex-shrink-0">
            <template #icon>
                <n-icon><ArrowNext20Regular /></n-icon>
            </template>
            登出
        </n-button>
    </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { useUserStore } from '../../store/user';
import {computed} from 'vue'
import {  ArrowNext20Regular } from '@vicons/fluent'

const userStore = useUserStore()
const router = useRouter()

function logout() {
    userStore.logout()
    router.push({
        name:'login'
    })
}

const userName = computed(()=>{
    if(userStore.userName) {
        return '欢迎你,'+userStore.userName
    } else {
        return '未登录'
    }
})
</script>